<template>
    <div>
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="home"><span @click="clearPath">首页</span></el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="primary" round @click="dialogVisible = true">添加分类</el-button>
            <tree-table
                empty-text="加载中"
                :data="categories"
                :columns="columns"
                :selection-type="false"
                style="font-size: 15px;border-radius: 15px;margin-top: 15px"
                :expand-type="false"
                show-index
                index-text="#"
            >
                <template slot="status" slot-scope="scope">
                    <el-button size="mini" v-if="scope.row.cat_deleted === false" type="success" icon="el-icon-check"
                               circle></el-button>
                    <el-button size="mini" v-if="scope.row.cat_deleted === true" type="danger" icon="el-icon-close"
                               circle></el-button>
                </template>
                <template slot="level" slot-scope="scope">
                    <el-button size="mini" v-if="scope.row.cat_level === 0" type="success"
                               round>一级
                    </el-button>
                    <el-button size="mini" v-if="scope.row.cat_level === 1" type="warning"
                               round>二级
                    </el-button>
                    <el-button size="mini" v-if="scope.row.cat_level === 2" type="danger"
                               round>三级
                    </el-button>
                </template>
                <template slot="opt" slot-scope="scope">
                    <el-button @click="editDialogVisible = true" size="mini" type="primary"
                               round>编辑
                    </el-button>

                    <el-button size="mini" type="danger"
                               round>删除
                    </el-button>
                </template>
            </tree-table>
            <div>
                <el-pagination
                    @size-change="handChangeCateListSize"
                    @current-change="handChangeCateListCurrent"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 3, 5]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="50%">
                <span>这是一段信息</span>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
                        </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Cate",

        data() {
            return {
                categories: [],
                queryInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5,
                },
                total: 0,
                columns: [{
                    label: '分类名称',
                    prop: 'cat_name'
                }, {
                    label: '是否有效',
                    type: 'template',
                    template: 'status'
                }, {
                    label: '排序',
                    type: 'template',
                    template: 'level'
                }, {
                    label: '操作',
                    type: 'template',
                    template: 'opt'
                }],
                editDialogVisible:false,
                loading:true,
            }
        },
        created() {
            this.getCategoryList()
        },
        methods: {
            async getCategoryList() {
                let res = await this.$http.get('categories', {params: this.queryInfo})
                // console.log(res.data)
                this.total = res.data.data.total
                this.categories = res.data.data.result
                // console.log(this.queryInfo)
                // console.log(this.total)
                console.log(this.categories);
            },
            clearPath() {
                window.sessionStorage.removeItem('path');
            },
            handChangeCateListSize(size) {
                this.queryInfo.pagesize = size
                this.getCategoryList()
            },
            handChangeCateListCurrent(current) {
                this.queryInfo.pagenum = current
                this.getCategoryList()
            }

        }
    }
</script>

<style scoped>

</style>
